import { createTheme } from "@mantine/core";

const defaults = {
  defaultRadius: 4,
};

const colors = {
  orchid: [
    "#dffbff",
    "#caf2ff",
    "#99e2ff",
    "#64d2ff",
    "#3cc4fe",
    "#23bcfe",
    "#09b8ff",
    "#00a1e4",
    "#008fcd",
    "#007cb6",
  ],
  earl: [
    "#ecf4ff",
    "#dce4f5",
    "#b9c7e2",
    "#94a8d0",
    "#748dc0",
    "#5f7cb7",
    "#5474b4",
    "#44639f",
    "#3a5890",
    "#2c4b80",
  ],
  magenta: [
    "#fff0f6",
    "#ffd6e7",
    "#ffadd2",
    "#ff85c0",
    "#f759ab",
    "#eb2f96",
    "#c41d7f",
    "#9e1068",
    "#780650",
    "#520339",
  ],
  pale: [
    "#eef3ff",
    "#dce4f5",
    "#b9c7e2",
    "#94a8d0",
    "#748dc1",
    "#5f7cb8",
    "#5474b4",
    "#44639f",
    "#39588f",
    "#2d4b81",
  ],
  cyan: [
    "#e6fffb",
    "#b5f5ec",
    "#87e8de",
    "#5cdbd3",
    "#36cfc9",
    "#13c2c2",
    "#08979c",
    "#006d75",
    "#00474f",
    "#002329",
  ],
  purple: [
    "#f2f0ff",
    "#e0ddf5",
    "#bfbae3",
    "#9b94d1",
    "#7d73c1",
    "#6a5fb8",
    "#6054b5",
    "#4f459f",
    "#463d90",
    "#3b3480",
  ],
};

const orchid = createTheme({
  ...defaults,
  colors,
  primaryColor: "orchid",
  primaryShade: 7,
});

const magenta = createTheme({
  ...defaults,
  colors,
  primaryColor: "magenta",
  primaryShade: 7,
});

const pale = createTheme({
  ...defaults,
  colors,
  primaryColor: "pale",
  primaryShade: 6,
});

const cyan = createTheme({
  ...defaults,
  colors,
  primaryColor: "cyan",
  primaryShade: 6,
});

const purple = createTheme({
  ...defaults,
  colors,
  primaryColor: "purple",
  primaryShade: 5,
});

const earl = createTheme({
  ...defaults,
  colors,
  primaryColor: "earl",
  primaryShade: 6,
});

export default { orchid, magenta, pale, cyan, purple, earl };
